<template>
  <div class="admin-login_item11">
    <div class="tiem11-bodys">
      <div class="item11-body_title">登录</div>
      <div class="item11-body_subtitle">欢迎来到我们的世界!</div>
      <div class="item11-admIsd">
        <input class="body-admIsd" v-model="user.username" placeholder="请输入您的账号" />
      </div>
      <div>
         <input class="body-admIsd" v-model="user.password" type="password" placeholder="请输入您的密码" />
      </div>
      <div class="item11-login-buton">
        <el-button class="buton-action" @click="OnSubmit" :loading="loading">登录</el-button>
      </div>
       <!-- <div class="body-forgt"><a class="body-forgt-alin" href="#">忘记密码?</a></div> -->
    </div>
  </div>
</template>

<script>
  export default {
     data() {
       return {
         loading: false,
         user: {
         	username: '',
         	password: ''
         }
       }
     },
     mounted() {
     	this.init()
     },
     methods: {
       async OnSubmit() {
        this.loading = true
        await this.$ala.userLogin(this.user)
        this.loading = false
        await this.$emit('afterLogin')
       }
     }
   }
</script>

<style lang="scss">
  .admin-login_item11{
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 1200px;
    // display: flex;
    // flex-direction: row;
    background: url("https://diyapi.5ug.com/wwwroot/uploads/api/256-116-382/2022-02-17/620de4a4051295f55528992a.png");
    overflow: hidden;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    .tiem11-bodys{
      top: 20%;
      left: 7%;
      min-width: 0;
      position: absolute;
      .item11-body_title{
        font-size: 35px;
        font-weight: bold;
      }
      .item11-body_subtitle{
        font-size: 18px;
        padding: 15px 0;
        font-weight: bold;
      }
      .item11-admIsd{
        margin-top: 15px;
      }
      .body-admIsd{
        outline:none;
        margin: 10px 0;
        border-radius: 46px;
        width: 300px;
        height: 40px;
        font-size: 16px;
        padding: 8px 15px;
        background-color: #F7F4FB;
        margin-left: -10px;
      }
      .body-admIsd::-webkit-input-placeholder {
        color: #8C8C8C;
        font-size: 15px;
      }
    }
    .item11-login-buton{
      font-size: 20px;
      width: 150px;
      height: 40px;
      margin-top: 20px;
      .buton-action {
        font-size: 20px;
        background-color: #5C66F0;
        color: #ffffff;
        width: 150px;
        padding: 10px 0px;
        border-radius: 40px;
        box-shadow:1px 2px 5px #5C66F0;
      }
    }
    .item11-login-buton span {
      font-size: 16px;
      letter-spacing:5px
    }
    .body-forgt{
      margin-top: 40px;
      .body-forgt-alin{
        font-size: 14px;
        color: #679EFF;
      }
      .body-forgt-alin:hover{
        color: #066FD1;
        font-weight: bold;
      }
    }
  }
</style>
